<template>
  <div>
<van-nav-bar
  title="购物车"
  left-text="返回"
  left-arrow
  @click-left="$router.go(-1)"
/>
<div class="quanbu">
  <div v-if="!items.length" >
     <van-empty
     image="https://img2.baidu.com/it/u=3214428190,3968304704&fm=26&fmt=auto&gp=0.jpg"
      description="空空如也">
      <van-button round type="danger"
       @click="dianji" class="bottom-button">去购物</van-button>
     </van-empty>
  </div>
<van-swipe-cell  v-for="(item,index) in items" :key="index">
<div class="CartConn" >
  <van-checkbox v-model="item.checked" ></van-checkbox>
  <van-card
    :num="item.value"
    :price="item.price"
    :title="item.name"
    class="goods-card"
    :thumb="item.imgs.split('||')[0]"
  >
  </van-card>
  </div>
  <van-stepper v-model="item.value"  @change="changenum(items)"/>

<template #right>
    <van-button square text="删除" type="danger" class="delete-button" @click="del(item)" />
  </template>
</van-swipe-cell>
</div>
<van-submit-bar :price="allprice" button-text="提交订单" @submit="onSubmit">
  <van-checkbox v-model="allClick" >全选</van-checkbox>
</van-submit-bar>
<tabbar/>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
import Tabbar from '@components/Tabbar.vue'
import { Dialog } from 'vant'
export default {
  data () {
    return {
      value: 1,
      items: JSON.parse(localStorage.getItem('items'))
        ? JSON.parse(localStorage.getItem('items'))
        : []
    }
  },
  created () {
  },

  methods: {
    ...mapActions([
      'set_cart'
    ]),
    del (item) {
      Dialog.confirm({
        title: '删除商品',
        message: '确认删除？'
      })
        .then(() => {
          this.items.forEach((elem, index) => {
            if (elem === item) {
              this.items.splice(index, 1)
              localStorage.setItem('items', JSON.stringify(this.items))
              this.set_cart()
            }
          })
        })
        .catch(() => {
        })
    },
    changenum (items) {
      localStorage.setItem('items', JSON.stringify(this.items))
    },
    dianji () {
      this.$router.push('/home')
    },
    onSubmit () {
      const order = []
      this.items.forEach(elem => {
        if (elem.checked === true) {
          order.push(elem)
        }
      })
      localStorage.setItem('order', JSON.stringify(order))
      this.$router.push('/order')
    }
  },
  computed: {
    allClick: {
      get () {
        return this.items.every(elem => {
          return elem.checked
        })
      },
      set (state) {
        this.items.forEach(elem => {
          elem.checked = state
        })
        localStorage.setItem('items', JSON.stringify(this.items))
      }
    },
    allprice: function () {
      let allprice = 0
      this.items.forEach(elem => {
        if (elem.checked) {
          allprice += elem.price * elem.value
        }
      })
      return allprice * 100
    }
  },
  components: {
    Tabbar
  }
}
</script>

<style lang="scss" scoped>
  .goods-card {
    margin: 0;
    background-color: white;
  }

  .delete-button {
    height: 100%;
  }
  .CartConn{
    display: flex;
  }
  .van-swipe-cell{
      flex: 1;
    }
    .van-submit-bar__bar{
      position:fixed;
      bottom: 50px;
      left: 0;
      right: 0;
    }
.goods-card{
  flex: 1;
}
.van-stepper{
  margin-left: 280px;
}
.van-swipe-cell{
  background-color: white;
}
.van-nav-bar{
  position:fixed;
      top: 0;
      left: 0;
      right: 0;
}
.quanbu{
  position:fixed;
      top: 50px;
      left: 0;
      right: 0;
      overflow: auto;
      bottom: 100px;
      background-color: #F7F7F7;
}
  .bottom-button {
    width: 160px;
    height: 40px;
  }
</style>
